﻿@import (reference) "../../../Less/engine.less";

#gameMapContainer
{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 32px;
    bottom: 0px;
}

#gameMapContainer > canvas
{
    cursor: pointer;
    width: 100%;
    height: 100%;
}

#npcDialog
{
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 10000;

    & table
    {
        width: 100%;
        border-spacing: 0px;
        border-collapse: collapse;

        & thead td
        {
            font-weight: bold;
        }
    }
}

#dialogSentence
{
    overflow-y: scroll;
    padding: 3px;
    box-sizing: border-box;
    height: 100%;
    width: 70%;
    float: left;
}

#dialogAnswers
{
    bottom: 0px;
    padding: 3px;
    box-sizing: border-box;
    float: right;
    width: 30%;
    overflow-y: auto;
    height: 100%;
}

#dialogAnswers div
{
    margin: 2px;
    padding: 1px;
    box-sizing: border-box;
    width: ~"calc(100% - 6px)";
}

#mapMessage
{
    position: absolute;
    left: ~"calc(50% - 200px)";
    width: 400px;
    top: 60%;
    //background-color: @panelBackground;
    box-sizing: border-box;
    //padding: 5px;
    //border: solid 2px @panelBorder;
    //font-size: 18px;
    display: none;

    & .gamePanelContentNoHeader
    {
        font-size: 18px;
    }
}


.mapMessageVisible
{
    opacity: 1;
    animation-name: mapMessageIn;
    animation-duration: 0.5s;
}

.mapMessageHidden
{
    opacity: 0;
    animation-name: mapMessageOut;
    animation-duration: 0.5s;
}

#mapLoadingPage
{
    display: none;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 100000;

    & div
    {
        text-align: center;
        font-size: 40px;
        margin-top: ~"calc(50vh - 20px)";
    }
}

#cheatDetected
{
    position: absolute;
    background-color: red;
    color: #ffd800;
    font-size: 20px;
    top: @menubarHeight;
    right: 30px;
    padding: 5px;
    display: none;
}

#sounds
{
    display: none;
}

@media (min-width: 500px)
{
    #npcDialog
    {
        height: 300px;
        width: 500px;
        left: ~"calc(50% - 250px)";
        top: ~"calc(50% - 150px)";
    }
}

@keyframes mapMessageIn
{
    from
    {
        opacity: 0;
    }

    to
    {
        opacity: 1;
    }
}

@keyframes mapMessageOut
{
    from
    {
        opacity: 1;
    }

    to
    {
        opacity: 0;
    }
}

#releaseGameMessage
{
    position: absolute;
    right: 10px;
    top: 70px;
    width: 300px;
    padding: 5px;
    border: solid 2px black;
    background-color: rgba(255, 180, 0, 0.5);
    font-size: 18px;
}
